<template>
  <!-- 首页 -->
  <div class="background full-background">
    <div class="container">
      <div class="contain">
        <!--图书馆标志-->
        <img class="library-sign" src="../../assets/login/logo.png" alt=""/>
        <!--搜索-->
        <div class="search-box">
          <a-select class="select-item"
                    @change="handleProvinceChange"
                    v-model="searchType"
          >
            <a-select-option
                class="select-option-item"
                v-for="province in provinceData"
                :key="province"
            >{{ province }}
            </a-select-option>
          </a-select>
          <a-select
              class="select-item"
              v-model="searchSubType"
              v-if="cities.length > 0"
          >
            <a-select-option
                class="select-option-item"
                v-for="city in cities"
                :key="city"
            >{{ city }}
            </a-select-option>
          </a-select>
          <!--输入框-->
          <a-input class="search-input" v-model="searchValue" placeholder="请输入检索词"/>
          <!--搜索框-->
          <a-button class="search-button" @click="searchHandle" @keyup.enter="searchHandle">
            <a-icon type="search"/>
          </a-button>
        </div>
        <div class="remarks-box">
            <div>
                版权所有©常德市图书馆
            </div>

        </div>
        <router-link class="slip-down-box" :to="{path:'/LocalHistory'}">
          <a-icon class="down-img" type="double-right"/>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
//首页栏目code
// const code = "home";
const provinceData = ['馆藏目录', '全站搜索'];
const cityData = {
  '馆藏目录': ['题名', '任意词', '正题名', 'ISBN/ISSN', '著者', '主题词', '分类号', '控制号', '订购号', '出版社', '索书号'],
  '全站搜索': [],
};
const GCSS = {
  '题名': 'title',
  '任意词': '',
  '正题名': 'title200a',
  'ISBN/ISSN': 'isbn',
  '著者': 'author',
  '主题词': 'subject',
  '分类号': 'class',
  '控制号': 'ctrlno',
  '订购号': 'orderno',
  '出版社': 'publisher',
  '索书号': 'callno'
}
export default {
  name: "Index",
  data() {
    return {
      provinceData,
      cityData,
      cities: cityData[provinceData[0]],
      searchSubType: cityData[provinceData[0]][0],
      searchType: '',
      searchValue:''
    };
  },
  mounted() {
    this.searchType = provinceData[0]
  },
  methods: {
    handleProvinceChange(value) {
      this.cities = cityData[value];
      this.searchSubType = cityData[value][0];
    },
    searchHandle() {
      if(this.searchType == '馆藏目录') {
        let searchUrl = "http://111.8.133.41:8001/opac/search?searchWay=" + GCSS[this.searchSubType] + '&g=' + this.searchValue + '&searchSource=reader&integrationCode=&scWay=dim&marcformat=&sortWay=score&sortOrder=desc&startPubdate=&endPubdate=&rows=10&hasholding=1'
        window.location.href = searchUrl
      }else {
        console.log('新页面')
      }
    }
  },
};
</script>

<style lang="less" scoped>
//phone
@media only screen and(max-width: 576px) {
  .background {
    @width: 100vw;
    @min-height: 100vh;
    width: @width;
    min-height: @min-height;
    background-image: url("../../assets/Phone-BackgroundImage/Home.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;

    .contain {
      width: @width;
      min-height: @min-height;
      display: grid;
      grid-template-rows: repeat(10, 1fr);
      grid-template-columns: repeat(10, 1fr);

      .library-sign {
        grid-row: 3 / span 1;
        grid-column: 2 / span 8;
        justify-self: center;
        align-self: flex-start;
        width: calc(@width / 2);
        height: 8vw;
      }

      .search-box {
        grid-row: 4 / span 3;
        grid-column: 2 / span 8;
        width: calc(@width / 10 * 8);
        height: (@min-height / 10 * 3);
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(8, 1fr);

        .select-item:nth-of-type(1) {

          grid-row: 1 / span 1;
          grid-column: 1/ span 4;
          width: calc(@width / 6 * 2 - 2vw);
          height: 10vw;
          justify-self: center;
          margin-left: 5vw;

        }

        .select-item:nth-of-type(2) {

          grid-row: 1 / span 1;
          grid-column: 5 / span 4;
          width: calc(@width / 6 * 2 - 2vw);
          height: 10vw;
        }

        .search-input {

          grid-row: 2 / span 1;
          grid-column: 1 / span 8;
          width: calc(@width / 6 * 4);
          justify-self: center;
          align-self: center;
        }

        .search-button {
          grid-row: 3 / span 1;
          grid-column: 1 / span 8;
          width: calc(@width / 6 * 4);
          justify-self: center;
          align-self: end;
          background-color:rgba(15, 121, 205, 1);
          color: white;
          border: none;
          border-radius: 1vw;
          font-size: 4vw;

        }
      }

      .remarks-box {
        grid-row: 8 / span 1;
        grid-column: 2 / span 8;
        justify-self: center;
        font-weight: 400;
        color: #6C6C6C;
        font-size: 3vw;
        align-self: center;
      }

      .slip-down-box {
        grid-row: 10 / span 1;
        grid-column: 2 / span 8;
        width: calc(@width / 10 / 3 * 2);
        height: calc(@width / 10);
        place-self: center;
        transform: rotate(90deg);
        font-size: calc(@width / 10 / 3 * 2);

        .down-img {
          color: RGBA(122, 128, 118, 1);
        }
      }

    }

  }
}

//pc
@media only screen and(min-width: 576px) {
  .background {
    background-image: url("../../assets/PC-BackgroundImage/SearchBackground.png");
    display: flex;
    justify-content: center;

    .contain {
      @max-width: 1200px;
      height: 100vh;
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(10, 1fr);

      .library-sign {
        grid-row: 1 / span 1;
        grid-column: 3 / span 6;
        justify-self: center;
        align-self: flex-end;
        width: 220px;
        height: 35px;
        display: block;
      }

      .search-box {
        grid-row: 2 / span 1;
        grid-column: 3 / span 6;
        width: calc(@max-width / 10 * 6); //720px
        display: flex;
        justify-content: space-between;
        margin-top: 30px;

        .select-item {
            width: 100px;
            height: 40px;
            display:flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #d9d9d9;
            .select-option-item{
                height:35px;
            }

        }

        .search-input {
          width: 380px;
          height: 40px;
          border-radius:0 ;
          &:hover, &:focus, &:target, &visited, &active{
            border:1px solid #d9d9d9;
            box-shadow:none;
            outline: none;
          }
        }

        .search-button {
          width: 120px;
          height: 40px;
          background-color: rgba(15, 121, 205, 1);
          color: white;
          border: none;
          border-radius: 5px;
          font-size: 20px;
        }
      }

      .remarks-box {
        grid-row: 3 / span 1;
        grid-column: 3 / span 6;
        justify-self: center;
        align-self: flex-end;
        padding-bottom:15px;
        font-weight: 400;
        color: #6C6C6C;
        font-size: 14px;
      }

      .slip-down-box {
        display: none;
      }

    }

  }


    .select-item:nth-of-type(1){
        border-radius:5px;
        background-color:RGBA(158, 158, 158, 0.2);
    }
    .select-item:nth-of-type(2){
        background-color:white;
        position:relative;
        right:-8px;
        border-radius: 0;
        border-right:none;
    }
    /deep/.ant-select-selection--single {
        position: relative;
        width:95px;
        height: 35px;
        line-height:35px;
        cursor: pointer;
        display:flex;
        align-items: center;
        background-color:RGBA(158, 158, 158, 0.2);

    }


}

</style>


